<!-- src/views/Dashboard.vue -->
<template>
  <div>
    <div class="welcome-section">
      <div class="welcome-text">
        <h1>欢迎回来，管理员！</h1>
        <p>这是您的数据分析控制台，您可以在这里查看系统状态、管理数据和用户。</p>
      </div>
    </div>
    
    <div class="stats-container">
      <div class="stat-card">
        <div class="stat-icon" style="background: rgba(67, 97, 238, 0.1); color: var(--primary);">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-info">
          <div class="stat-title">总用户数</div>
          <div class="stat-value">2,842</div>
          <div class="stat-change change-up">
            <i class="fas fa-arrow-up"></i> 12.5% 较上月
          </div>
        </div>
      </div>
      
      <!-- 其他统计卡片... -->
    </div>
    
    <div class="card">
      <div class="card-header">
        <div class="card-title">系统概览</div>
      </div>
      <div class="card-body">
        <p>这里是系统概览内容，可以展示图表、数据表格或其他重要信息。</p>
        <p>当您需要嵌入ECharts报表时，只需在此区域添加ECharts组件即可。</p>
      </div>
    </div>
    
    <div class="card">
      <div class="card-header">
        <div class="card-title">最近活动</div>
      </div>
      <div class="card-body">
        <p>显示最近用户活动、系统日志或其他动态信息。</p>
      </div>
    </div>
        <div class="card">
      <div class="card-header">
        <div class="card-title">销售数据统计</div>
      </div>
      <div class="card-body">
        <div ref="chart" style="width: 100%; height: 400px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DashboardView'
}
</script>
